<template>
  <view class="container">
    <button @click="downloadImage()" class="btn">下载图片</button>
    <view v-if="iconFilePath" class="image-box">
      <image :src="iconFilePath" mode="widthFix" class="image" />
    </view>
    <view v-if="progress > 0" class="progress">
      下载进度：{{ progress }}%
    </view>
  </view>
</template>
<script>


	export default {
		data() {
			return {
				  imageURL:'',
				      iconFilePath: '', // 存储下载后的临时文件路径
				      progress: 0 // 存储下载进度
				    
			};
		},
		methods: {
			downloadImage(){
				const imageURL="https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg";
				const imagetask=uni.downloadFile({
					
					url:imageURL,
					success:(res)=>{
						if(res.statusCode===200){
							console.log('下载成功');
							uni.previewImage({
								urls:[res.tempFilePath]
							});
							this.iconFilePath=res.tempFilePath;
						}
					},
					fail:(err)=>{
						console.error('下载失败',err);
					}
				});
				imagetask.onProgressUpdate((res)=>{
					this.progress=res.progress;
					console.log('下载进度：',res.progree+"%");
					console.log('已下载',res.totalBytesWritten);
					console.log('总大小:',res.totalBytesExpectedToWrite);
				});
			}
		}
	}
</script>

<style>
.container {
  padding: 20rpx;
}
.btn {
  background-color: #007aff;
  color: #fff;
  padding: 15rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}
.image-box {
  margin-top: 20rpx;
}
.image {
  width: 100%;
  max-width: 600rpx;
}
.progress {
  margin-top: 20rpx;
  color: #007aff;
  font-size: 28rpx;
}
</style>
